<template>
	<view class="">
		<view class="">
			<image class="head_img" :src="details_list.Images" mode="aspectFill"></image>
		</view>
		
		<!-- 商品名称 -->
		<view class="goods_name flex">
			<view class="namebox">
				<view class="flex">
				  <view class="name d2">{{details_list.ProductName}}</view>
				</view>
				<view class="price" v-if="details_list.Price!=0 && details_list.PV!=0">
					积分：{{details_list.PV}}+
					<view class="now_price cprice">
						<text style="font-size: 28rpx;margin-right: -6rpx;color: #e71b00;font-weight: 600;">￥</text>
						{{details_list.Price}}
					</view>
				</view>
				<view class="price" v-else-if="details_list.Price==0 ">
					<view class="now_price cprice">
						<text style="font-size: 24rpx;color: #e71b00;font-weight: 600;">积分：</text>
						{{details_list.PV}}</view>
				</view>
				<view class="price" v-else-if="details_list.PV==0 ">
					<view class="now_price cprice" >
						<text style="font-size: 28rpx;margin-right: -6rpx;color: #e71b00;font-weight: 600;">￥</text>
						{{details_list.Price}}
					</view>
				</view>
			</view>
			<!-- <view class="shar" @click="openShar">
				<button class="botton_add" @tap="decreaseCount">-</button>
				    <text style="font-size: 36rpx;color: #000;">{{ count }}</text>
				<button class="botton_add" style="background-color: #c5c5c5;" @tap="increaseCount">+</button>
				<view class="discount" >8折 限10件</view>
				<view class="icon">
					<uni-icons type="redo" color="#68e4a8" size="30"></uni-icons>
				</view>
				<view class="lab">分享</view>
			</view> -->
		</view>
		<view class="box3">
			<view class="tit" @click="previewImage(details_list.Images)">商品详情</view>
			<view class="content">
				<!-- <image :src="details_list.Images"  mode=""></image> -->
			</view>
		</view>
		<!-- <view style="height: 160rpx;background-color: #1C1C1C;">
		</view> -->
		<view class="bottom">
			<view class="moneny" v-if="details_list.PV==0">
				<view class="textbox">
					<text style="margin-right: -6rpx;">￥</text>
					<text>{{ totalPrice }}</text>
				</view>
				<view  class="bottom_btn" @click="giftEvent">立即购买</view>
			</view>
			<view class="moneny" v-else-if="details_list.Price==0">
				<view>
					<text >积分:</text>
					<text>{{ totalPV }}</text>
				</view>
				<view class="bottom_btn">{{(totalPV > userScore)?'积分不足':'立即兑换'}}</view>
			</view>
			<view class="moneny" v-else-if="details_list.Price!=0 && details_list.PV!=0">
				<view>
					<view class="integral">积分:{{ totalPV }}+</view>
					<text style="margin-right: -6rpx;">￥</text>{{ totalPrice }}
				</view>
			</view>
		</view>
		<view ref="hands" v-show="flag"> 
			<view class="store" >
				<view  @click="flag=!flag" class="staff_card_cont" style="justify-content: flex-end;">
					<uni-icons type="closeempty" size="30"></uni-icons>
				</view>
				<view class="staff_card_cont" @tap="nav_to('/pages/dynamic/Address')">
					<text>+添加收货地址</text>
					<uni-icons type="forward" color="rgba(127, 130, 141, 1)" size="30"></uni-icons>
				</view>
				<view class="staff_card_cont" >
					<text>商品名称</text>
					<text>手套</text>
				</view>
				<view class="staff_card_cont" >
					<text>购买数量</text>
					<text>*2</text>
				</view>
				<view class="staff_card_cont" >
					<text>商品总价</text>
					<text style="color: #e71b00;">￥178</text>
				</view>
				<view class="cont_sub">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return{
				id:'',
				details_list:{},
				count: 1, //商品数量
				userScore:0,
				flag:false,
			}
		},
		async onLoad(e) {
			this.id=e.id
			console.log(this.id,'=====商品id');
			this.get_detail()
			await this.$api.post('/Common/Add_ViewPath', {
				Path: 'detail',
				Platform: uni.getStorageSync('platform')
			});
		},
		computed: {
		    totalPV() {
		      return this.count * this.details_list.PV;
		    },
		    totalPrice() {
		      return this.count * this.details_list.Price;
		    }
		},
		methods:{

			
			//支付
			async giftEvent() {
				const l = [{
					productID:this.details_list.ID,
					Name: this.details_list.ProductName,
					Price: this.details_list.Price>0?this.details_list.Price:this.details_list.PV,
					style:this.details_list.Style,
					Qty: "1",
				}]
				console.log(JSON.stringify(l));
				let sub = await this.$api.post('/Order/Submit', {
					Price:1*l.Price,
					Delivery_Address:'',
					Delivery_Accepter: '',
					Delivery_Phone:'',
					CouponNo: '',
					Discounts:'',
					ItemStr : JSON.stringify(l),
					ProductID:this.details_list.ID,
					ProductName:this.details_list.ProductName,
					Qty:1,
					Price:l.Price,
					Style :this.details_list.Style,
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app"
					// #endif
				});
				console.log('-----==');
				console.log(sub);

				let pres = await this.$api.post('Payment/PayV2', {
					total_fee: l[0].Price,
					EventType: '商品购买',
					EventID: JSON.stringify(sub.data),
					body: l[0].Name,
					SourcePage: 'detail',
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app"
					// #endif
				});
				console.log('--=-----');
				console.log(pres);
				// 已余额支付成功
				if (pres.data == 0) {
					// 提示购买成功
					this.$pv.msg('购买成功');
					return;
				}

				// 支付成功返回的内容
				let payObj = JSON.parse(pres.data);
				let _this = this;
				// 调用uni支付API
				uni.requestPayment({
					// 服务提供商
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success(res) {
						console.log(res);
						// _this.$pv.msg('等待对方同意');
						// _this.$im.sendMessage(200, JSON.stringify(l), id, 12).then(res => {
						// 	console.log(res);
						// })
					},
					fail(err) {
						_this.$pv.msg('支付失败');
					}
				});
			},
			previewImage(image) {
				console.log('1111');
			   uni.previewImage({
			     urls: [image],
			     current: image
			   })
			},
			async get_detail(){
				let res = await this.$api.post('/Products/Detail',{
					ID:this.id
				})
				console.log('商品详情 ',res);
				this.details_list= res.data
			},
			decreaseCount() {
			    if (this.count > 0) {
			        this.count--;
			    } else {
			        this.count = 0;
			    }
			},
			increaseCount() {
			  this.count++;
			},
			pledges() {
				this.$refs['hands'].open();
			}
		}
	}
</script>

<style lang="scss">
	.head_img{
		width: 100%;
		height: 750rpx;
	}
	.goods_name {
		width: 100%;
		margin-top: -10rpx;
	    border-top: 1px solid #f5f7f9;
	    min-height: 100rpx;
		padding-bottom: 20rpx;
	    background: #fff;
	    padding-left: 24rpx;
	    padding-right: 24rpx;
		// margin-top: 10rpx;
		display: flex;
		// align-items: center;
		justify-content: space-between;
		.tag{
		  display: inline-block;
		  padding-left: 15rpx;
		  padding-right: 15rpx;
		  background: #ffebe0;
		  color: #f77f41;
		  line-height: 1.6;
		  border-radius: 4rpx;
		  font-size: 28rpx;
		  text{
			  color: #f00;
			  font-weight: bold;
		  }
		}
		.shar{
			width: 60%;
			display: flex;
			align-items: center;
			color: #4c6a82;
			.botton_add{
				padding: 0;
				background: none;
				width: 50rpx;
				height: 50rpx;
				border: 2rpx solid #736b6b;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 50rpx;
				margin: 10rpx;
			}
			.discount{
				height: 40rpx;
			    background-image: linear-gradient(45deg, #9402ad, #c148f3);
			    padding: 0 15rpx;
			    border-radius: 10rpx;
			    color: white;
			    display: flex;
			    align-items: center;
			}
		}
	    .price {
			padding-top: 10rpx;
			display: flex;
			align-items: baseline;
			color: #5a5f63;
			.now_price {
				font-size: 32rpx;
				margin-right: 20rpx;
				color: #e71b00;
				text {
				  font-size: 32rpx;
				}
				.name{
				  font-size:24rpx;
				  color: #333;
				}
			}
			
	      
	    }
		.namebox{
			width: 40%;
			.flex {
				.btn {
					margin-left: 30rpx;
					width: 120rpx;
					height: 50rpx;
					line-height: 50rpx;
					background: #ffcbcb;
					font-size: 28rpx;
					color: #fff;
					border-radius: 28rpx;
					text-align: center;
				}
				.name {
					//width: 500rpx;
					font-size: 32rpx;
					color: #333;
					line-height: 50rpx;
					font-weight: bold;
					padding-top: 20rpx;
				}
	    	}
		}
		
	  }
	.box3{
		.tit{
			font-size: 32rpx;
			padding-left: 10px;
			border-top: 4px solid #f5efef;
			border-bottom: 1px solid #a29b9b;
			line-height: 70rpx;
			background-color: white;
			color: #000;
		}
		.content{
			font-size: 28rpx;
			line-height: 50rpx;			
			image{
				width: 100%;
				height: 100rpx;
			}	
		}
	}
	.bottom {
		width: 100%;
		height: 150rpx;
		background-color: #1C1C1C;
		// display: flex;
		// justify-content: space-around;
		// position: fixed;
		// bottom: 0rpx;
		width: 750rpx;
		z-index: 10;
		// justify-content: space-between;
		.moneny{
			display: flex;
			justify-content: space-between;
			// align-items: center;
			// position: relative;
			// top: 20rpx;
			// left: 40rpx;
			// height: 72rpx;
			height: 100%;
			// font-size: 60rpx;
			// display: flex;
			align-items: baseline;
			color: #ff3d02;
			text{
				color: #ff3d02;
			}
			.textbox{
				margin: 30rpx 0 0 25rpx;
				font-size: 36rpx;
				color: #8c8c8c;
				// margin-top: 15rpx;
			}
			.bottom_btn {
				margin: 30rpx 25rpx 0 0 ;
				height: 72rpx;
				width: 192rpx;
				font-size: 24rpx;
				line-height: 72rpx;
				text-align: center;
				background-image: linear-gradient(#FDF9F6, #E1C4A6);
				border-radius: 40rpx;
				color: #1F1F1F;
				// display: flex;
				// align-items: center;
				// justify-content: center;
				// position: relative;
				// top: 20rpx;
				// right: 40rpx;
			}
			.integral{
				margin-top: 15rpx;
				font-size: 36rpx;
				line-height: 0rpx;
				text-align: right;
				color: #ff3d02;
			}
		}
	}
	.store{
		background-color: white;
	    height: 800rpx;
	    width: 750rpx;
	    position: fixed;
	    z-index: 20rpx;
	    bottom: 0;
		border-radius:32rpx 32rpx 0 0;
		.staff_card_cont {
			display: flex;
			justify-content: space-between;
			height: 96rpx;
			border-bottom: 8rpx solid #f7f7f7;
			font-size: 28rpx;
			align-items: center;
			color: #181818;
			padding: 0 40rpx;
			text{
				color: #000;
				font-size: 36rpx;
			}
		}
		.cont_sub{
			height: 106rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #e02e24;
			position: absolute;
			bottom: 0;
			width: 750rpx;
			color: white;
		}
	}
</style>